<template>
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="zhima-card">
          <div class="ibox-title">
            <h5 class="card-title">芝麻分数</h5>
            <div class="pull-right">
              <div class="btn-group">
                <button type="button" class="btn btn-xs btn-white" @click="sortZhima(0)">今天</button>
                <button type="button" class="btn btn-xs btn-white" @click="sortZhima(1)">昨天</button>
                <button type="button" class="btn btn-xs btn-white" @click="sortZhima(2)">近三天</button>
                <button type="button" class="btn btn-xs btn-white" @click="sortZhima(3)">近五天</button>
              </div>
            </div>
          </div>
          <div class="ibox-content">
            <div class="row">
              <div class="col-sm-12">
                <ul class="stat-list" id="sort_list_zhima">
                  <li v-for="(item, index) in zhimaData" :key="index">
                    <span class="label">{{ item.label }}:</span>
                    <span class="value">{{ item.value }}</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zhimaData: [], // 用于存储芝麻分数数据
    };
  },
  methods: {
    sortZhima(option) {
      // 在这里调用接口，根据传入的选项参数查询数据
      // 例如，可以使用axios或其他HTTP库来发送异步请求
      // 在请求成功后，将返回的数据赋值给zhimaData
      // 示例：假设接口返回的数据是一个数组，包含不同日期的芝麻分数
      if (option === 0) {
        // 调用接口查询今天的数据
        // this.zhimaData = 返回的数据
      } else if (option === 1) {
        // 调用接口查询昨天的数据
        // this.zhimaData = 返回的数据
      } else if (option === 2) {
        // 调用接口查询近三天的数据
        // this.zhimaData = 返回的数据
      } else if (option === 3) {
        // 调用接口查询近五天的数据
        // this.zhimaData = 返回的数据
      }
    },
  },
};
</script>

<style scoped>
.zhima-card {
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px; /* 控制卡片之间的间距 */
}

.card-title {
  font-size: 18px;
  margin-bottom: 10px;
}

.btn-group {
  margin-top: 5px;
}

.btn {
  font-size: 12px;
  margin-right: 5px;
}

.stat-list {
  list-style: none;
  padding: 0;
}

.stat-list li {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.label {
  font-weight: bold;
  margin-right: 5px;
}

.value {
  font-size: 14px;
}
</style>
